<style scoped>

</style>

<template>
  <a-layout-sider width="200" style="background: #fff">
    <a-menu
      v-model:selectedKeys="selectedKeys"
      v-model:openKeys="openKeys"
      mode="inline"
      :style="{ height: '100%', borderRight: 0 }"
    >
      <a-menu-item key="/welcome">
        <router-link to="/welcome">
          <coffee-outlined/> &nbsp; 欢迎 
        </router-link>
      </a-menu-item>
      <a-menu-item key="/passenger">
        <!-- 点击路由跳转的标签 "rooter-link" -->
        <router-link to="/passenger">
          <user-outlined/> &nbsp; 乘车人
        </router-link>
      </a-menu-item>
      <a-menu-item key="/ticket">
        <router-link to="/ticket">
          <user-outlined/> &nbsp; 余票查询
        </router-link>
      </a-menu-item>
      <a-menu-item key="/my-ticket">
        <router-link to="/my-ticket">
          <user-outlined/> &nbsp; 我的车票
        </router-link>
      </a-menu-item>

    </a-menu>
  </a-layout-sider>
</template>

<script>
import { defineComponent,ref,watch } from 'vue';
import router from '@/router';

export default defineComponent({
  name: "main-sider-view",
  setup() {
    const selectedKeys = ref([]);
    const openKeys = ref([]);

    watch(
      // 监听当前的路由页面的变化
      () => router.currentRoute.value.path , 
      // 当路由发生变化的时候执行的回调函数
      (newPath) => {
        console.log('watch',newPath)
        // 先清空selectedKeys数组中的值
        selectedKeys.value = []
        // 将当前变化的值添加到selectedKeys数组中
        selectedKeys.value.push(newPath)
      },
      // 强制立即执行回调
      {immediate:true}
    )

      return {
        selectedKeys,
        openKeys
      };
    },
});
</script>